window.onload = function () {
    var btnLeft = document.querySelector(".lt");
    var btnRight = document.querySelector(".gt");
    var lunbo = document.querySelector(".lunbo");
    lunbo.addEventListener("mouseover", function () {
        btnLeft.style.display = "block";
        btnRight.style.display = "block";
        clearInterval(timer);
        timer = null;
    });
    lunbo.addEventListener("mouseleave", function () {
        btnLeft.style.display = "none";
        btnRight.style.display = "none";
        timer = setInterval(function () {
            btnRight.click();
        }, 2000);
    });
    //动态生成小圆圈
    var imgs = document.querySelector(".imgs");
    var imgw = imgs.querySelector("img");
    var cricle = document.querySelector(".cricle");
    var imgWidth = imgw.offsetWidth;
    for (var i = 0; i < imgs.children.length; i++) {
        var li = document.createElement("li");
        li.setAttribute("index", i);
        cricle.appendChild(li);
        //排他思想，干掉所有人，留下我自己
        li.addEventListener("click", function () {
            for (var i = 0; i < cricle.children.length; i++) {
                cricle.children[i].className = "";
                this.className = "current";
            }
            var index = this.getAttribute("index");
            num = index;
            cricleNum = index;
            animate(imgs, -imgWidth * index)
        });
    }
    // 克隆第一个图片
    cricle.children[0].className = "current";
    var first = imgs.children[0].cloneNode(true);
    imgs.appendChild(first);

    // 点击右侧按钮滚动
    var num = 0;
    var cricleNum = 0;
    var flag = true;
    btnRight.addEventListener("click", function () {
        if(flag){
            flag=false;
            if (num == imgs.children.length - 1) {
                imgs.style.left = 0;
                num = 0;
            }
            num++;
            animate(imgs, -num * imgWidth,function(){
                flag=true;
            });
            cricleNum++;
            if (cricleNum == cricle.children.length) {
                cricleNum = 0;
            }
            cricleChange();
        }
    })

    // 点击左侧按钮 
    btnLeft.addEventListener("click", function () {
        if(flag){
            flag = false;
            if (num == 0) {
                num = imgs.children.length - 1;
                imgs.style.left = -num * imgWidth + "px";
            }
            num--;
            animate(imgs, -num * imgWidth,function(){
                flag = true;
            });
            cricleNum--;
            cricleNum = cricleNum < 0 ? cricle.children.length - 1 : cricleNum;
            cricleChange();
        }
        
    })
    // 点击时小圆圈样式改变
    function cricleChange() {
        for (var i = 0; i < cricle.children.length; i++) {
            cricle.children[i].className = "";
        }
        cricle.children[cricleNum].className = "current"
    }
    // 自动轮播
    var timer = setInterval(function () {
        btnRight.click();
    }, 2000);
    //缓动动画
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 20);
    }

}